<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>角色列表修改</title>
</head>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<script src="./resources/js/jquery.min.js"></script>
<script src="./resources/js/common.js"></script>
<body>
<div id="mainApp">
  <el-container style="padding-top:20px;">
	  <el-header style="heighe:10px;">
		  <el-row :gutter="24">
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8">
				<el-breadcrumb class="breadcrumb-inner">
					<el-breadcrumb-item><h2>角色列表修改</h2></el-breadcrumb-item>
				</el-breadcrumb>
			</el-col>
		  </el-row>
	  </el-header>
	  <el-main>
	  	  <el-card calss="box-card">
	  	  	<el-row :gutter="24">
		  		<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8">
		  			<span><h4>角色信息</h4></span>
		  		</el-col>
		  	</el-row>
		  </el-card>
		  
		  <el-card calss="box-card" style="margin-top:20px">
			  <el-row :gutter="24">
			  	<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8">
			  		角色编号:<el-input v-model="role.roleCode" :disabled="true"/>
			  	</el-col>
			  	<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8">
			  		角色名称:<el-input v-model="role.roleName"/>
			  	</el-col>
			  </el-row>
			  <el-row style="margin-top:20px">
				  <el-aside width="200px"> 
			  		<el-tree
					  :data="menuTreeData"
					  show-checkbox
					  default-expand-all
					  node-key="id"
					  ref="tree"
					  :props="defaultProps"
					  >
					</el-tree>
				</el-aside>
			  </el-row>
		  </el-card>
		  <el-button type="primary" @click="updateRole">修改</el-button>
	  </el-main>
  </el-container>
</div>
</body>
<script>
new Vue({
		el:"#mainApp",
	    data:{
	    	roleName:"",
	    	menuTreeData:[],
          	defaultProps: {
          		children: 'childList',
          		label: 'menuName'
          	},
          	arr:[],
          	urlData:'',
          	role:''
	    },
	    mounted: function (){
	    	this.urlData = getRequest();
	    	//获取所有权限列表
	    	this.allTreeMenu();
	    	//获取当前用户所有权限
	    	this.findById();
	    },
	    methods: {
	      //获取所有权限
	      allTreeMenu(){
	    	  var _this = this;
	    	  $.post("/menu/allTreeMenu", function(data) {
	    		  _this.menuTreeData = data;
	    	  });
		  },
	      //获取用户列表
	      findById(){
			  var id = this.urlData['id'];
	    	  var _this = this;
	    	  $.get("/role/findById/"+id, function(data) {
	    		  if(data!=null){
	    			  _this.role = data;
	    			  var _data = data.menuList;
	    			  var checkArr = _this.getCheckNode(_data);
	    			  //设置勾选
	    			  _this.$refs.tree.setCheckedKeys(checkArr);
	    		  }
	    	  });
	      },
	      //递归循环获取最下级勾选的id
	      getCheckNode(data){
	    	  for(var i in data){
	    		  var _data = data[i];
	    		  if(_data.childList==null || _data.childList.length<=0){
	    			  this.arr.push(_data.id);
	    		  }else{
	    			  this.getCheckNode(_data.childList);
	    		  }
	    	  }
	    	  return this.arr;
	      },
	      updateRole(){
	    	  	var _this = this;
		    	var ids = this.$refs.tree.getCheckedKeys();
		    	var hlf = this.$refs.tree.getHalfCheckedKeys();
		    	var idStr="";
		    	for(var i in ids){
		    		idStr+=ids[i]+",";
		    	}
		    	for(var h in hlf){
		    		idStr+=hlf[h]+",";
		    	}
		    	idStr = idStr.substring(0,idStr.length-1);
		    	$.post("/role/saveRole/"+this.role.id+"/"+this.role.roleCode+"/"+this.role.roleName+"/"+idStr, function(data) {
		    		if("1"==data.code){
		    			_this.$alert('<strong>操作成功!</strong>', '提示', {
					          dangerouslyUseHTMLString: true
					    });
	　　　　　　　　　　}else{
						_this.$alert('<strong>操作失败!</strong>', '提示', {
					          dangerouslyUseHTMLString: true
					    });
	　　　　　　　　　　}
		    	});
	      }
	    }
	  });
</script>
</html>